<template>
  <scroll-view>
    <view class="page-result" :class="`result_${type}`" v-if="isLoad">
      <image class="result-icon" :src="image" mode="aspectFit" />
      <text class="result-text">{{ textMap[type] }}</text>
      <view class="card">
        <view class="m-row" v-for="(item, index) in (details || {}).data1 || []" :key="index">
          <text class="col-l">{{ item.key }}</text>
          <text class="col-r" v-if="item.value">{{ item.value }}</text>
        </view>
      </view>
      <view class="more-info">
        <view class="tag"></view>
        <view class="m-row" v-for="(item, index) in (details || {}).data2 || []" :key="index">
          <view class="title">{{ item.key }}：</view>
          <view class="text" v-if="item.value">{{ item.value }}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script setup>
import { ref, computed } from "vue";

import { report } from "@/api";
import { onLoad } from "@dcloudio/uni-app";

const type = ref(2);

const details = ref({});

const isLoad = ref(false)

const imgMap = {
  1: "http://www.xinchengai.top:443/sad.png",
  2: "http://www.xinchengai.top:443/surprise.png",
  3: "http://www.xinchengai.top:443/grumpy.png",
};

const textMap = {
  1: "轻微",
  2: "中等",
  3: "严重",
};

const image = computed(() => {
  return imgMap[type.value];
});

const getDetails = (id) => {
  report(id).then((res) => {
    details.value = res;
    type.value = res.severityEvaluation > 3 ? 2 : res.severityEvaluation;
    isLoad.value = true
  });
};

onLoad((options) => {
  options.id && getDetails(options.id);
});
</script>

<style lang="scss">
.page-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 40rpx;
  &.result_1 {
    .result-text {
      color: #b69e88;
    }
    .card,
    .tag {
      background-image: linear-gradient(45deg, #e1ccab, #ebdbc4);
    }

    .more-info {
      background: #f4ede1;
    }
  }
  &.result_2 {
    .result-text {
      color: #ffc2af;
    }
    .card,
    .tag {
      background-image: linear-gradient(45deg, #ffc2af, #fb835d);
    }

    .more-info {
      background: #f4ede1;
    }
  }
  &.result_3 {
    .result-text {
      color: #FB835D;
    }
    .card,
    .tag {
      background-image: linear-gradient(45deg, #FB835D, #EC4A34);
    }

    .more-info {
      background: #f4ede1;
    }
  }
  .result-icon {
    width: 140px;
    height: 140px;
  }
  .result-text {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
  }
  .card {
    width: 90%;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 40rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10rpx 10rpx rgba($color: #000000, $alpha: 0.2);
    margin: 40rpx 0;
    .m-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      padding: 20rpx 0;
      .col-l {
        font-size: 30rpx;
        color: #fff;
        font-weight: bold;
      }
      .col-r {
        height: 60rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        border-radius: 60rpx;
        background: #fff;
        color: #c06318;
      }
    }
  }
  .more-info {
    width: 90%;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 40rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10rpx 10rpx rgba($color: #000000, $alpha: 0.2);
    color: #c06318;
    .tag {
      width: 60rpx;
      height: 60rpx;
      border-radius: 14rpx;
      margin: 20rpx 0;
    }
    .m-row {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      .title {
        font-weight: bold;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
